<template>
  <div class="app-container">
    <div class="search-container">
      <SearchForm ref="queryFormRef" :model="searchParam" :inline="true" @reset="handleResetQuery"
        @search="handleQuery">
        <el-form-item prop="keywords" label="关键字">
          <el-input v-model="searchParam.keywords" placeholder="岗位名称关键字" clearable @keyup.enter="handleQuery" />
        </el-form-item>
      </SearchForm>
    </div>

    <el-card shadow="never" class="table-container">
      <template #header>
        <el-button type="success" @click="handleOpenDialog()"><i-ep-plus />新增</el-button>
        <el-button type="danger" :disabled="selectionIds.length === 0"
          @click="handleDelete()"><i-ep-delete />删除</el-button>
      </template>

      <el-table ref="dataTableRef" v-loading="loading" :data="jobData" highlight-current-row border row-key="role_id"
        @row-click="handleRowClick" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="岗位名称" prop="name" min-width="100" />
        <el-table-column label="排序" prop="job_sort" width="150" />
        <el-table-column label="状态" prop="enabled" width="100">
          <template #default="scope">
            <el-switch v-model="scope.row.enabled" :active-value="1" :inactive-value="0"
              @change="handleStatusChange(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="创建日期" prop="create_time" min-width="100" />
        <el-table-column fixed="right" label="操作" align="center" width="130">
          <template #default="scope">
            <el-button type="primary" size="small" link @click="handleOpenDialog(scope.row)">
              <i-ep-edit /> 编辑
            </el-button>
            <el-button type="danger" size="small" link @click="handleDelete(scope.row.role_id)">
              <i-ep-delete />删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <Pagination v-if="pagination.total > 0" v-model:total="pagination.total" v-model:page="pagination.current"
        v-model:limit="pagination.size" @pagination="handlePageChange" />
    </el-card>

    <!--表单弹窗-->
    <Form v-model="formModal.visible" :title="formModal.title" :selected-item="selectedItem" ref="jobFormRef"
      @close="handleDialogClose" @submit="handleDialogSummit" />
  </div>
</template>

<script setup lang="ts">

defineOptions({
  name: "Job",
  inheritAttrs: false,
})

import JobAPI, { JobVO } from "@/api/job"

import Form from "./form.vue"

const queryFormRef = ref(ElForm)
const jobFormRef = ref(ElForm)

const loading = ref(false)

const selectedItem = ref<JobVO>({
  job_sort: 0,
  enabled: 1,
})

const selectionIds = ref<number[]>([])

const searchParam = reactive({
  keywords: undefined,
  enabled: undefined,
})

const pagination = reactive({
  current: 0,
  size: 10,
  total: 0,
})

//构建storex的查询条件
const queryCondition = reactive<QueryCondition>({
  paging: {
    current: pagination.current,
    size: pagination.size,
  },
  sorts: [{
    field: "job_sort",
    sort_asc: true
  }]
})


// 岗位表格数据
const jobData = ref<JobVO[]>()


// 表单弹窗
const formModal = reactive({
  title: "",
  visible: false,
})

const handlePageChange = () => {
  queryCondition.paging = { ...pagination }
  getPage()
}


/** 分页查询 */
const getPage = () => {
  loading.value = true
  JobAPI.getPage(queryCondition).then((res) => {
    const { status, data } = res
    if (status === 200) {
      jobData.value = data.records
      pagination.total = data.total
    }
  }).finally(() => {
    loading.value = false
  })
}

/** 查询 */
const handleQuery = () => {
  queryCondition.and = []
  if (searchParam.keywords) {
    queryCondition.and?.push(
      { field: "name", op: "like", value: `%${searchParam.keywords}%` }
    )
  }
  queryCondition.paging = {
    current: 1,
    size: pagination.size
  }
  getPage()
}

/** 重置查询 */
const handleResetQuery = () => {
  searchParam.keywords = undefined
  pagination.current = 1
  handleQuery()
}



/** 行复选框选中记录选中ID集合 */
const handleSelectionChange = (selection: any) => {
  selectionIds.value = selection.map((item: any) => item.role_id)
}

/** 选择行 */
const handleRowClick = (row: JobVO) => {
  selectedItem.value = { ...row }
}
/** 改变状态 */
const handleStatusChange = (row: any) => {
  JobAPI.update(row).then((res) => {
    if (res.status === 200) {
      ElMessage.success("更新状态成功")
      handleQuery()
    }
  })
}

/** 打开岗位弹窗 */
const handleOpenDialog = (row?: JobVO) => {
  if (row && row.job_id) {
    formModal.title = "编辑岗位"
  } else {
    formModal.title = "新增岗位"
  }
  formModal.visible = true
}
/** 岗位弹窗提交 */
const handleDialogSummit = () => {
  formModal.visible = false
  handleQuery()
}

/** 关闭岗位弹窗 */
const handleDialogClose = () => {
  formModal.visible = false
}


/** 删除角色 */
const handleDelete = (jobId?: number) => {
  const jobIds = jobId ? [jobId] : selectionIds.value
  if (!jobIds) {
    ElMessage.warning("请勾选删除项")
    return
  }

  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(
    () => {
      loading.value = true
      const deleteCondition: QueryCondition = {
        "_cond": { and: [{ field: "job_id", op: "in", value: jobIds }] }
      }
      JobAPI.deleteByCondition(deleteCondition).then((res) => {
        if (res.status === 200) {
          ElMessage.success("删除成功")
          handleQuery()
        }
      }).finally(() => (loading.value = false))
    },
    () => { }
  )
}

onMounted(() => {
  handleQuery()
})
</script>
